<template>
  <div style="padding: 10px">
    <div style="margin: 50px auto; text-align: center">
      <img
        :src="imgURL + 'home2.png'"
        alt="logo"
        title="logo"
        style="height: 500px"
      />
    </div>
    <div style="margin: 0 auto; text-align: center">
      <div style="margin: 10px">
        <a-typography-title :level="1">欢迎您，EBC管理员</a-typography-title>
      </div>
    </div>
    <div class="container">
      <a-divider
        ><a-typography-title :level="3"
          >系统运行情况</a-typography-title
        ></a-divider
      >
    </div>

    <div class="container">
      <a-row v-if="managerTradeInfo != undefined">
        <a-col span="2"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2"
                >{{ managerTradeInfo.user_num }}位</a-typography-title
              >
              <a-divider />
              <a-typography-title :level="4"
                ><UsergroupAddOutlined /> &nbsp;
                注册用户数量</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
        <a-col span="4"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2"
                >{{ managerTradeInfo.match_trade_num }}个</a-typography-title
              >
              <a-divider />
              <a-typography-title :level="4"
                ><PartitionOutlined /> &nbsp;
                完成交易撮合数量</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
        <a-col span="4"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2"
                >{{ managerTradeInfo.run_day }}天</a-typography-title
              >
              <a-divider />
              <a-typography-title :level="4"
                ><HistoryOutlined /> &nbsp; 系统平稳运行天数</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="container">
      <a-divider
        ><a-typography-title :level="3">交易情况</a-typography-title></a-divider
      >
    </div>
    <!-- 确保state存在的时候再渲染 -->
    <div style="margin: 0 auto; text-align: center" v-if="state">
      <lineChart1 :list="state" />
      <a-divider />
      <lineChart2 :list="state" />
    </div>
  </div>
</template>
<script>
import { onMounted } from "vue";
import lineChart1 from "./lineChart/index.vue";
import lineChart2 from "./lineChart/index2.vue";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
import { reactive, ref } from "vue";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";
import { imgURL } from "../../api/storage";

export default {
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
    lineChart1,
    lineChart2,
  },
  data() {
    return {
      imgURL,
    };
  },
  setup() {
    const managerTradeInfo = ref();
    const state = ref();
    const getManagerData = () => {
      get("/info/market/managerTradeInfo").then((res) => {
        managerTradeInfo.value = res.data;
      });
    };
    const getReportData = () => {
      get("/trade/tradeInfo/getTimeSlot").then((res) => {
        console.log(res);
        state.value = res.data;
      });
    };
    getReportData();
    getManagerData();
    return { state, managerTradeInfo, getReportData, getManagerData };
  },
};
</script>
<style>
.div-inline {
  display: inline;
}
.container {
  margin: 50px 0px;
}
</style>